<template>
  <view class="general">
    <!-- 头部 -->
    <view class="head">
      <image src="../../static/images/BackIcon.png" mode="aspectFill"  @click="handleBack"/>
      <view class="title">订购积分</view>
    </view>

    <!-- 中间用户信息 -->
    <view class="middle">
      <image src="../../static/WoDEMingXiBg.png" mode="aspectFill" />
      <view class="middle-item">
        <view class="left">
          <image src="../../static/MorenTx.png" mode="aspectFill" />
          <view style="margin-top: 10rpx">用户名125487</view>
          <view>ID:875896</view>
        </view>
        <view class="right">
          <view class="right-option">
            <view class="option">转让</view>
            <view class="option">换茶票</view>
            <view class="option">换茶票</view>
          </view>
          <view class="scoreName">
            <view class="right-scoreName">
              <view>订购积分</view>
              <view style="margin-top: 20rpx">58745424.00</view>
            </view>
            <view class="right-scoreName">
              <view>订购积分</view>
              <view style="margin-top: 20rpx">58745424.00</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区 -->
    <view class="content">
      <view class="top">
        <view>订购积分类型:</view>

        <!-- 自定义下拉组件 -->
        <view class="dropdown-container">
          <!-- 下拉按钮 -->
          <view class="custom-dropdown" @click="toggleDropdown">
            <text class="dropdown-text">{{ currentText }}</text>
            <text class="dropdown-arrow" :class="{ rotate: isDropdownOpen }"
              >▼</text
            >
          </view>

          <!-- 下拉菜单 -->
          <view v-if="isDropdownOpen" class="dropdown-menu">
            <view
              v-for="(item, index) in options"
              :key="index"
              class="menu-item"
              @click="selectItem(item)"
            >
              {{ item }}
            </view>
          </view>
        </view>

        <view class="dropdown-container">
          <!-- 下拉按钮 -->
          <view class="custom-dropdown" @click="toggleMonthDropdown">
            <text class="dropdown-text">{{ currentMonthText }}</text>
            <text
              class="dropdown-arrow"
              :class="{ rotate: isDropdownOpenMonth }"
              >▼</text
            >
          </view>

          <!-- 下拉菜单 -->
          <view v-if="isDropdownOpenMonth" class="dropdown-menu">
            <view
              v-for="(item, index) in optionMonth"
              :key="index"
              class="menu-item"
              @click="selectMoth(item)"
            >
              {{ item }}
            </view>
          </view>
        </view>
      </view>

      <!-- 记录项 -->
      <view class="record">
        <image
          src="../../static/images/WoDEIcon07.png"
          mode="aspectFill"
          class="img"
        />
        <view class="code">
          <view>xxxxxxxxxxxxxxxxxxxx</view>
          <view>xxxxxxxxxxxxxxxxxxxx</view>
          <view class="code-item">记录编号:13874547</view>
          <view class="code-item">2025-08-15 18:58:52</view>
        </view>
        <view class="score">+588</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
//返回上一层
const handleBack = () => {
  uni.navigateBack();
};
// 下拉选项
const options = ["全部", "订购积分", "竞购积分"];
const optionMonth = ["本月", "一月", "二月"];
// 当前选中的文本
const currentText = ref(options[0]);
const currentMonthText = ref(optionMonth[0]);
// 控制下拉菜单是否打开
const isDropdownOpen = ref(false);
const isDropdownOpenMonth = ref(false);
// 切换下拉菜单
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
};

const toggleMonthDropdown = () => {
isDropdownOpenMonth.value = !isDropdownOpenMonth.value;
}
// 选择某一项
const selectItem = (item) => {
  currentText.value = item;
  isDropdownOpen.value = false; // 关闭菜单
};
const selectMoth = (item) => { 
  currentMonthText.value = item;
  isDropdownOpenMonth.value = false;
};
</script>

<style lang="scss" scoped>
.general {
  .head {
    width: 100%;
    height: 155rpx;
    background: #5756b3;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    position: relative;

    image {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
    }

    .title {
      color: aliceblue;
      font-size: 50rpx;
      flex: 1;
      text-align: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .middle {
    width: calc(100% - 40rpx);
    margin: 20rpx;
    height: 250rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .middle-item {
      width: 100%;
      position: absolute;
      top: 36rpx;
      left: 0;
      display: flex;
      justify-content: space-around;

      .left {
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 30rpx;
        }
      }

      .right {
        .right-option {
          height: 50rpx;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .option {
            width: 130rpx;
            height: 100%;
            background: rgb(107, 52, 8);
            color: rgb(242, 188, 132);
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10rpx;
            font-size: 24rpx;
          }
        }

        .scoreName {
          display: flex;
          align-items: center;

          .right-scoreName {
            margin-top: 20rpx;
            text-align: center;
            margin-left: 20rpx;

            view:first-child {
              font-size: 24rpx;
              color: rgb(0, 0, 0);
            }

            view:last-child {
              font-size: 32rpx;
              font-weight: bold;
              color: rgb(0, 0, 0);
            }
          }
        }
      }
    }
  }

  .content {
    margin-top: 40rpx;
    width: calc(100% - 80rpx);
    padding: 0 40rpx;

    .top {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #333;
      gap: 20rpx;

      .dropdown-container {
        position: relative;
        display: inline-block;
      }

      /* 自定义下拉按钮 */
      .custom-dropdown {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 160rpx;
        padding: 0 10rpx;
        height: 50rpx;
        background-color: #6b3408;
        color: #e1ab76;
        border-radius: 100rpx;
        padding: 0 20rpx;
        font-size: 24rpx;
        font-weight: bold;
        text-align: center;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
        cursor: pointer;
        margin-left: 20rpx;
      }

      .dropdown-text {
        color: #e1ab76;
        font-size: 24rpx;
      }

      .dropdown-arrow {
        color: #e1ab76;
        font-size: 20rpx;
        transition: transform 0.3s ease;
      }

      .dropdown-arrow.rotate {
        transform: rotate(180deg);
      }

      /* 下拉菜单 */
      .dropdown-menu {
        position: absolute;
        top: 70rpx;
        left: 0;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 10rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        min-width: 160rpx;
        z-index: 1000;
        overflow: hidden;
      }

      .menu-item {
        padding: 20rpx;
        font-size: 24rpx;
        color: #333;
        text-align: center;
        border-bottom: 1px solid #eee;
      }

      .menu-item:last-child {
        border-bottom: none;
      }

      .menu-item:hover {
        background-color: #f0f0f0;
      }
    }

    .record {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      width: 100%;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #000;

      .img {
        width: 50rpx;
        height: 50rpx;
        border-radius: 30rpx;
      }

      .code {
        margin-left: 40rpx;

        .code-item {
          color: rgb(212, 212, 210);
          font-size: 20rpx;
        }
      }

      .score {
        width: 275rpx;
        text-align: right;
      }
    }
  }
}
</style>